import React, { useState, useEffect } from 'react'
import classes from './FilterMeals.module.css'

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons'

const FilterMeals = ({ onfilter }) => {

	console.log('FilterMeals')

	const [keyword, setKeyword] = useState('');

	useEffect(() => {
		const timerId = setTimeout(() => {
			onfilter(keyword);
		}, 500);

		return () => {
			clearTimeout(timerId);
		}
	}, [keyword]);

	const inputChangeHandler = (e) => {
		setKeyword(e.target.value.trim());
		// onfilter(keyword);
	}
	return (
		<div className={classes.FilterBox}>
			<input
				type="text"
				placeholder="Please enter a keyword"
				className={classes.FilterInput}
				onChange={inputChangeHandler}
				value={keyword}
			/>
			<FontAwesomeIcon icon={faMagnifyingGlass} size='xs' className={classes.SearchIcon} />
		</div>
	)
}

export default React.memo(FilterMeals)